<template>
  <div class="piechart-container-small">
    <div class="ringchart-box">
      <ve-ring :extend="extend"></ve-ring>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {
  data() {
    this.extend = {
      series: {
        hoverAnimation:false,
        color: ["#00F5FF", "#DCDCDC"],
        center: ["50%", "20%"],
        radius: ["55%", "70%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            position: "center",
            fontSize: 1
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold"
            }
          }
        },
        labelLine: {
          show: false,
          normal: {
            show: false
          }
        },
        color: series => {
          if (series.name == "占比") {
            return {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#7af8f3" // 0% 处的颜色  #f2d49f
                },
                {
                  offset: 1,
                  color: "#5bc7fa" // 100% 处的颜色 #f17e5f
                }
              ],
              globalCoord: false // 缺省为 false
            };
          } else {
            return {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#eee" // 0% 处的颜色  #f2d49f
                },
                {
                  offset: 1,
                  color: "#eee" // 100% 处的颜色 #f17e5f
                }
              ],
              globalCoord: false // 缺省为 false
            };
          }
        },
        data: [
          {
            value: 75,
            name: "占比",
            
            label: {
              normal: {
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold"
                }
              }
            },
          },
          {
            value: 25,
            name: "搜索引擎占比",
            itemStyle:{
              borderColor:'#fff',
              borderWidth:4
            }
          }
        ]
      }
    };
    return {
      chartData: {
        columns: ["占比", "访问用户"],
        rows: [
          { 占比: "cabinet", 访问用户: 0.65 },
          { 占比: "111", 访问用户: 0.35 }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.piechart-container-small {
  height: 150px;
  flex: 1;
}
</style>
